<template>
    <el-form label-width="80px" :inline="true" size="mini" :model="form" class="demo-form-inline">
        <page-main>
            <el-alert
                title="服务要求 Service Request"
                type="success"
                :closable="false"
                style="margin-bottom: 20px;"
            />

            <el-form-item label="运输类型">
                <el-select v-model="form.type" placeholder="请选择运输类型">
                    <el-option
                        label="空运"
                        value="air"
                    />
                    <el-option
                        label="海运"
                        value="sea"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="产品">
                <el-select v-model="form.cp" placeholder="请选择产品">
                    <el-option
                        label="急件"
                        value="0"
                    />
                    <el-option
                        label="标准"
                        value="1"
                    />
                    <el-option
                        label="经济"
                        value="2"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="服务">
                <el-select v-model="form.fw" placeholder="请选择服务">
                    <el-option
                        label="Door to Door"
                        value="0"
                    />
                    <el-option
                        label="Door to Air"
                        value="1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="条款">
                <el-select v-model="form.tk" placeholder="请选择条款">
                    <el-option
                        label="Dap-Delivered"
                        value="0"
                    />
                    <el-option
                        label="Door to Air"
                        value="1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="运费条款">
                <el-select v-model="form.yftk" placeholder="请选择运费条款">
                    <el-option
                        label="PP-Prepaid"
                        value="0"
                    />
                    <el-option
                        label="Door to Air"
                        value="1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="条款地点">
                <el-input v-model="form.tkdd" clearable="" placeholder="请输入条款地点" />
            </el-form-item>
            <el-form-item label="始发港">
                <el-input v-model="form.sfg" clearable="" placeholder="请输入始发港" />
            </el-form-item>
            <el-form-item label="目的港">
                <el-input v-model="form.mdg" clearable="" placeholder="请输入目的港" />
            </el-form-item>
        </page-main>
        <page-main>
            <el-alert
                title="客户信息 Customer Information"
                type="success"
                :closable="false"
                style="margin-bottom: 20px;"
            />
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>选择客户</span>
                            <el-button style="float: right; padding: 3px 0;" type="text">添加</el-button>
                        </div>
                        <el-form-item label="客户">
                            <el-autocomplete
                                v-model="form.khmc"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入姓名"
                                :trigger-on-focus="false"
                                style="width: 170px;"
                                @select="handleSelect"
                            />
                        </el-form-item>
                        <!-- <el-form-item label="客户id">
                            <el-input v-model="form.khid" disabled />
                        </el-form-item> -->
                        <el-form-item label="客户组">
                            <el-input v-model="form.khz" disabled />
                        </el-form-item>
                        <!-- <el-form-item label="销售代码">
                            <el-input v-model="form.xsdm" disabled />
                        </el-form-item> -->
                        <el-form-item label="客户类型">
                            <el-input v-model="form.khlx" disabled />
                        </el-form-item>
                        <el-form-item label="剩余额度">
                            <el-input v-model="form.syed" disabled />
                        </el-form-item>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>选择发货人</span>
                            <el-button style="float: right; padding: 3px 0;" type="text">添加</el-button>
                        </div>
                        <el-form-item label="发货人">
                            <el-autocomplete
                                v-model="form.fhrxm"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入发货人姓名"
                                :trigger-on-focus="false"
                                style="width: 170px;"
                                @select="handleSelect"
                            />
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="form.fhrxmdh" disabled />
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="form.fhrdz" disabled />
                        </el-form-item>
                        <el-form-item label="具体地址">
                            <el-input v-model="form.fhrjtdz" disabled />
                        </el-form-item>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>选择收货人</span>
                            <el-button style="float: right; padding: 3px 0;" type="text">添加</el-button>
                        </div>
                        <el-form-item label="收货人">
                            <el-autocomplete
                                v-model="form.shrxm"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入收货人姓名"
                                :trigger-on-focus="false"
                                style="width: 170px;"
                                @select="handleSelect"
                            />
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="form.shrxmdh" disabled />
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="form.shrdz" disabled />
                        </el-form-item>
                        <el-form-item label="具体地址">
                            <el-input v-model="form.shrjtdz" disabled />
                        </el-form-item>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>选择通知方</span>
                            <el-button style="float: right; padding: 3px 0;" type="text">添加</el-button>
                        </div>
                        <el-form-item label="通知方">
                            <el-autocomplete
                                v-model="form.tzfxm"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入通知方姓名"
                                :trigger-on-focus="false"
                                style="width: 170px;"
                                @select="handleSelect"
                            />
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="form.tzfxmdh" disabled />
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="form.tzfdz" disabled />
                        </el-form-item>
                        <el-form-item label="具体地址">
                            <el-input v-model="form.tzfjtdz" disabled />
                        </el-form-item>
                    </el-card>
                </el-col>
            </el-row>
        </page-main>
        <page-main>
            <el-alert
                title="货物信息 Cargo Information"
                type="success"
                :closable="false"
                style="margin-bottom: 20px;"
            />
            <el-form-item label="订单号">
                <el-input v-model="form.kgddh" clearable="" placeholder="请输入客户订单号" />
            </el-form-item>
            <el-form-item label="货物件数">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入货物件数" />
            </el-form-item>
            <el-form-item label="包装类型">
                <el-select v-model="form.yftk" clearable="" placeholder="请选择包装类型">
                    <el-option
                        label="托盘"
                        value="0"
                    />
                    <el-option
                        label="木箱"
                        value="1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="计量单位">
                <el-select v-model="form.yftk" clearable="" placeholder="请选择计量单位">
                    <el-option
                        label="公斤"
                        value="0"
                    />
                    <el-option
                        label="棒"
                        value="1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="空间单位">
                <el-select v-model="form.yftk" clearable="" placeholder="请选择空间单位">
                    <el-option
                        label="厘米"
                        value="0"
                    />
                    <el-option
                        label="立方"
                        value="1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="重量">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入重量" />
            </el-form-item>
            <el-form-item label="长度">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入长度" />
            </el-form-item>
            <el-form-item label="宽度">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入宽度" />
            </el-form-item>
            <el-form-item label="高度">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入高度" />
            </el-form-item>
            <el-form-item label="体积">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入体积" />
            </el-form-item>
            <el-form-item style="width: 265px;" label-width="100px" label="是否可堆叠">
                <el-switch
                    v-model="form.value1"
                    active-text="是"
                    inactive-text="否"
                />
            </el-form-item>
            <el-form-item style="width: 265px;" label-width="100px" label="是否危险品">
                <el-switch
                    v-model="form.value2"
                    active-text="是"
                    inactive-text="否"
                />
            </el-form-item>
            <el-form-item style="width: 265px;" label-width="100px" label="是否可温度控制">
                <el-switch
                    v-model="form.value3"
                    active-text="是"
                    inactive-text="否"
                />
            </el-form-item>
            <el-form-item label="唛头">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入唛头" />
            </el-form-item>
            <el-form-item label="货物描述">
                <el-input v-model="form.hwjs" min="1" type="number" clearable="" placeholder="请输入货物描述" />
            </el-form-item>
        </page-main>
    </el-form>
</template>

<script type="text/ecmascript-6">
export default {
    components: {},
    props: {},
    data() {
        return {
            form: {
                type: '',
                cp: '',
                fw: '',
                tk: '',
                tkdd: '',
                yftk: '',
                sfg: '',
                mdg: ''
            },
            jsList: []
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.getJsList()
    },
    methods: {
        handleSelect() {
            // this.form.khmc = item.xm
        },
        querySearch(queryString, cb) {
            let results = []
            if (queryString) {
                results = this.createFilter(queryString, this.jsList)

            }
            cb(results)
        },
        createFilter(queryString, list) {
            let result = []
            for (let obj of list) {
                if (obj.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0) {
                    result.push(obj)
                }
            }
            return result
        },
        getJsList() {
            this.$api.get('auth/zh/selectJsList', {}).then(res => {
                if (res.success) {
                    this.jsList = res.data
                    console.log(this.jsList)
                }
            })
        }
    }
}
</script>
